<template>
	<div class="material-input" :class="{ 'active-line': modelValue || isfouces }">
		<input
			:type="type"
			:id="id"
			:value="modelValue"
			@input="updateValue"
			:required="required"
			:placeholder="placeholder"
			class="flex-1"
			@focus="isfouces = true"
			@blur="isfouces = false"
		/>
		<label :class="{ active: modelValue }" :for="id">{{ label }}</label>
		<slot></slot>
	</div>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue';
const isfouces = ref(false);
const props = defineProps({
	id: {
		type: String,
		default: 'material-input'
	},
	label: {
		type: String
	},
	modelValue: {
		type: [String, Number],
		default: ''
	},

	type: {
		type: String,
		default: 'text'
	},
	required: {
		type: Boolean,
		default: false
	},
	placeholder: {
		type: String,
		default: ' '
	}
});

const emit = defineEmits(['update:modelValue']);

function updateValue(event) {
	emit('update:modelValue', event.detail.value);
}
</script>

<style scoped>
/* 输入框容器 */
.material-input {
	position: relative;
	margin: 16px 0;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	min-height: 85rpx;
	display: flex;
	border-bottom: 2px solid #ccc;
}

/* 输入框样式 */
.material-input input {
	border: none;

	outline: none;
	font-size: 16px;
	width: 100%;
	padding: 8px 0;
	transition: border-color 0.3s;
}

/* 聚焦时边框颜色 */
.active-line {
	color: #02bcff;
	border-bottom: 2px solid #02bcff !important;
}

/* label 样式 */
.material-input label {
	position: absolute;
	top: 8px;
	left: 0;
	font-size: 16px;
	color: #aaa;
	pointer-events: none;
	transition: all 0.3s ease-in-out;
}

/* label 提升样式 */
.material-input label.active,
.material-input input:focus + label {
	top: -12px;
	font-size: 12px;
	color: #158aff;
}
</style>
